<!--
  项目详情
  projectId
  项目详情
  报价管理 ｜ 下料管理 ｜ 出库管理
-->
<template >
  <div class="detail-header">
    <a-page-header :title="detail.projectName">
      <template #extra>
        <a-button @click="showUpdate" type="primary">编辑</a-button>
      </template>
      <div>
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="客户名称">{{ detail.enterpriseName }}</a-descriptions-item>
          <a-descriptions-item label="项目编号">{{ detail.projectDateId }}</a-descriptions-item>
          <a-descriptions-item label="联系人1">{{ detail.positionUser1}} - {{ detail.projectUser1}} - {{ detail.projectUserTel1}}</a-descriptions-item>
          <a-descriptions-item v-if="detail.projectUser2!=null" label="联系人2">{{ detail.positionUser2}} - {{ detail.projectUser2}} - {{ detail.projectUserTel2}}</a-descriptions-item>
          <a-descriptions-item v-if="detail.projectUser3!=null" label="联系人3">{{ detail.positionUser3}} - {{ detail.projectUser3}} - {{ detail.projectUserTel3}}</a-descriptions-item>
          <a-descriptions-item label="所在城市">{{ area }}</a-descriptions-item>
          <a-descriptions-item label="详细地址">{{ detail.address }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ detail.createTime }}</a-descriptions-item>
          <a-descriptions-item label="创建人">{{ detail.createUserName }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-page-header>
  </div>
  <a-card
      class="smart-margin-top10"
      size="small">
    <a-tabs>
      <a-tab-pane key="enterprise" tab="企业信息">
        <a-card>
          <div>
            <a-descriptions size="small" :column="2">
              <a-descriptions-item label="企业名称">{{ enterpriseDetail.enterpriseName }}</a-descriptions-item>
              <a-descriptions-item label="联系人">{{ enterpriseDetail.contact}} - {{ enterpriseDetail.contactPhone}}</a-descriptions-item>
              <a-descriptions-item label="所在城市">{{ enterpriseArea }}</a-descriptions-item>
              <a-descriptions-item label="详细地址">{{ enterpriseDetail.address }}</a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="quotation" tab="报价管理" >
        <QuotationList :projectId="projectId" />
      </a-tab-pane>
      <a-tab-pane key="cutting" tab="下料管理" >
        <CuttingInfoList :projectId="projectId" />
      </a-tab-pane>
      <a-tab-pane key="outbound" tab="出库管理" >
        <OutboundInfoList :projectId="projectId" />
      </a-tab-pane>
    </a-tabs>
    <ProjectInfoForm  ref="operateRef" />
  </a-card>
</template>

<script setup>
  import _ from 'lodash';
  import { computed, onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import ProjectInfoForm from './project-info-form.vue';
  import { projectInfoApi } from '/@/api/business/project/project-info-api';
  import { enterpriseApi } from '/@/api/business/oa/enterprise-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import FilePreview from '/@/components/support/file-preview/index.vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import QuotationList from "./components/quotation-list.vue";
  import EmployeeList from "/@/views/business/oa/enterprise/components/enterprise-employee-list.vue";
  import CuttingInfoList from "/@/views/business/erp/project/components/cutting-info-list.vue";
  import OutboundInfoList from "/@/views/business/erp/project/components/outbound-info-list.vue";

  const route = useRoute();
  let projectId = ref();
  onMounted(() => {
    if (route.query.projectId) {
      projectId.value = Number(route.query.projectId);
      getDetail();
    }
  });

  //编辑
  const operateRef = ref();
  function showUpdate() {
    operateRef.value.show(detail.value);
  }

  // 详情
  let detail = ref({});
  async function getDetail() {
    try {
      let result = await projectInfoApi.detail(projectId.value);
      detail.value = result.data;
      if (detail.value.enterpriseId) {
        await getEnterpriseDetail(detail.value.enterpriseId)
      }
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }

  let enterpriseDetail = ref({})
  async function getEnterpriseDetail(enterpriseId) {
    try {
      let result = await enterpriseApi.detail(enterpriseId)
      enterpriseDetail.value = result.data;
    } catch (error) {
      console.error("企业信息获取失败")
    }
  }


  // 地区
  const area = computed(() => {
    let area = '';
    if (!detail.value) {
      return area;
    }
    if (detail.value.provinceName) {
      area = area + detail.value.provinceName;
    }
    if (detail.value.cityName) {
      area = area + detail.value.cityName;
    }
    if (detail.value.districtName) {
      area = area + detail.value.districtName;
    }
    return area;
  });

  const enterpriseArea = computed(() => {
    let area = ''
    if (!enterpriseDetail.value) {
      return area;
    }
    if (enterpriseDetail.value.provinceName) {
      area = area + enterpriseDetail.value.provinceName;
    }
    if (enterpriseDetail.value.cityName) {
      area = area + enterpriseDetail.value.cityName;
    }
    if (enterpriseDetail.value.districtName) {
      area = area + enterpriseDetail.value.districtName;
    }
    return area;
  })

</script>

<style scoped lang="less">
  .detail-header {
    background-color: #fff;
    padding: 10px;
  }
</style>